<template>
  <div>
    <a-result
      :status='status'
    >
      <template #title>
        {{ status === 'success' ? '提交成功' : '提交失败' + subTitle }}
      </template>
      
      <template #subTitle>
        <div v-if="status === 'success'">
          {{ subTitle }} {{ count }} 秒后将自动关闭页面, 请继续进行答题或自行离开, 如需修改答案请移步到 >题目列表>操作>修改答题
        </div>
        <div v-else>
          <p style='color: red'>{{ subTitle }}</p> {{ count }} 秒后将自动关闭页面, 有问题可向工作人员提出 如需修改答案请移步到
          >题目列表>操作>修改答题
        </div>
      </template>
      
      <div class='desc'>
        <a-descriptions title='提交信息' bordered>
          <a-descriptions-item label='提交编号'>
            {{ replyId }}
          </a-descriptions-item>
          <a-descriptions-item label='提交人'>
            <a> {{ $store.state.user.name }} </a>
          </a-descriptions-item>
          <a-descriptions-item label='学号'>
            <a>{{ $store.state.user.info.studentId }} </a>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      
      <template #extra>
        <a-button
          key='console'
          @click='close()'
          type='primary'>
          关闭页面
        </a-button>
        <a-button
          @click='close()'
          key='buy'>
          回到题目列表页
        </a-button>
      </template>
    </a-result>
  </div>
</template>

<script>
export default {
  name: 'ReplyResultPage',
  props: {
    // 提交ID
    replyId: {
      required: true,
      default: '114514',
      type: String
    },
    // 提交状态
    status: {
      required: true,
      type: String
    },
    // 提交返回的信息
    subTitle: {
      required: true,
      type: String
    },
    // 是否开启倒计时(默认关闭)
    isCountdown: {
      required: true,
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      count: 10,
      timer: null
    }
  },
  watch: {
    isCountdown(newValue) {
      if (newValue) {
        // 开启倒计时
        this.countdown()
      }
    }
  },
  methods: {
    countdown() {
      // 开始倒计时
      this.timer = setInterval(() => {
        if (this.count > 1) {
          this.count--
        } else {
          // 清除定时器并关闭当前页面
          clearInterval(this.timer)
          this.close()
        }
      }, 1000)
    },
    close() {
      window.close()
    }
  }
}
</script>

<style scoped>

</style>